<!--
 * @FilePath     : /jquery/demo/101-18.html
 * @Description  : :nth-child()
 * @Date         : 2025-03-27 11:09:32
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-03-27 11:21:46
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <h2>jq_page</h2>
    <ul class="p1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>
        <ul class="p11">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
    </ul>

    <ul class="p2">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>
        <ul class="p22">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
    </ul>

    <script src="/library/jquery.min.js"></script>
    <script src="/common/common.js"></script>
    <script>
      console.log(1, '1', $('li:nth-child(1)'))
      /*
      找作为第1个子元素的li
      [
        <li>1</li>, // .p1 第1个 li 子元素
        <li>1</li>, // .p11 第1个 li 子元素
        <li>1</li>, // .p2 第1个 li 子元素
        <li>1</li>, // .p22 第1个 li 子元素
      ]
      */

      console.log(2, '3', $('li:nth-child(3)'))
      /*
      找作为第3个子元素的li
      [
        <li>3</li>, // .p1 第3个 li 子元素
        <li>3</li>, // .p11 第3个 li 子元素
        <li>3</li>, // .p2 第3个 li 子元素
        <li>3</li>, // .p22 第3个 li 子元素
      ]
      */

      console.log(3, 'even', $('li:nth-child(even)'))
      /*
      22 个，筛选出所有第偶数个li （从1开始计数）
      []
      */

      console.log(4, 'odd', $('li:nth-child(odd)'))
      /*
      24 个，筛选出所有第奇数个li （从1开始计数）
      []
      */

      console.log(5, '2n', $('li:nth-child(2n)')) // 同 even 参数

      console.log(6, '2n+1', $('li:nth-child(2n+1)')) // 同 odd 参数

      console.log(7, '3n', $('li:nth-child(3n)'))
      /*
      14 个，筛选出所有第3个子元素（从1开始计数）
      */

      console.log(8, '3n+1', $('li:nth-child(3n+1)')) // 未知？
    </script>
  </body>
</html>
